<template>
  <div class="main">
    <div class="listTop">
      <header class="head">
        <van-icon name="arrow-left" class="reBtn" @click="reBack()" />
        {{ topFont }}
      </header>
      <p class="title" v-if="checked == false">审批意见</p>
      <div class="textBorder" v-if="checked == false">
        <textarea name="" placeholder="请输入审批意见" v-model="font"></textarea>
      </div>
      <button class="submit" v-if="checked == false" @click="submit">
        {{ buttonFont }}
      </button>
      <img v-if="checked" class="img" alt="" />
      <p v-if="checked" class="tips">意见提交成功，正在跳转回列表页</p>
      <button @click="jump()" class="jump" v-if="checked">立刻跳转</button>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  data() {
    return {
      font: "",
      checked: false,
      topFont: "审批意见",
      id: "",
      action: "",
      buttonFont: "提交",
      processInstanceId: "",
    };
  },

  mounted() {
    if (this.$route.query) {
      this.action = this.$route.query.action;
      this.id = this.$route.query.taskId;
      this.processInstanceId = this.$route.query.processInstanceId;
      if (this.action == "pass") {
        this.buttonFont = "同意";
        this.font = "同意";
      }
      if (this.action == "nopass") {
        this.buttonFont = "不同意";
        this.font = "不同意";
      }
    }
  },
  methods: {
    ...mapActions({
      completeTask: "pageApi/completeTask",
    }),
    tabAct(index) {
      this.act = index;
    },
    reBack() {
      this.$router.go(-1);
    },
    jump() {
      this.$router.push({ name: "main" });
    },
    formatDate(dates) {
      let date = new Date();
      let YY = date.getFullYear() + "-";
      let MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let DD =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "  ";
      let hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let ss =
        (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()) +
        "";
      return YY + MM + DD + hh + mm + ss;
    },
    submit() {
      if (this.font == "") {
        this.$toast("请输入审批意见");
        return false;
      }

      this.completeTask({
        loginId:
          this.$route.query.loginId || window.sessionStorage.getItem("loginId"),
        action: this.action,
        taskId: this.id,
        message: this.font,
        processInstanceId: this.processInstanceId,
        procStartTime: this.formatDate(),
      }).then((res) => {
        if (res.data.success) {
          this.$toast("操作成功");
          if (this.action == "pass") {
            this.topFont = "审批通过";
          } else {
            this.topFont = "审批驳回";
          }
          setTimeout(() => {
            this.$router.push({ name: "main" });
          }, 1500);
        } else {
          this.$toast(res.data.error);
        }
      });
      // this.checked=true;
    },
    onLoad() { },
  },
};
</script>

<style lang="scss" scoped type='text/css'>
.main {
  background-color: #f3f3f3;
}

.listTop {
  height: 10rem;
  color: #333;
  background: #fff;

  .head {
    font-size: 3.4rem;
    text-align: center;
    position: relative;
    color: #333;
    font-family: "黑体";
    padding: 3rem 0 3rem;

    .reBtn {
      position: absolute;
      left: 1.5rem;
      top: 2.5rem;
      font-size: 4.8rem;
    }
  }
}

.title {
  color: #333;
  font-size: 2.8rem;
  padding: 3rem 2.4rem;
  font-family: "黑体";
}

.textBorder {
  width: 100%;
  padding: 0 2.4rem;
  margin-bottom: 11.2rem;

  textarea {
    width: 100%;
    resize: none;
    height: 70rem;
    border: none;
    border-radius: 1rem;
    padding: 2.4rem;
    box-sizing: border-box;
    font-size: 14px;
  }
}

.submit {
  border-radius: 4.4rem;
  color: #fff;
  font-size: 2.8rem;
  font-family: "黑体";
  background: #2456ff;
  height: 8.8rem;
  width: 55rem;
  border: none;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.jump {
  border-radius: 4.4rem;
  color: #fff;
  font-size: 2.8rem;
  font-family: "黑体";
  background: #2456ff;
  height: 6.4rem;
  width: 28rem;
  border: none;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.img {
  width: 40rem;
  height: 40rem;
  display: block;
  margin: 18rem auto 4.8rem;
}

.tips {
  color: #999;
  font-size: 2.8rem;
  margin-bottom: 8rem;
  text-align: center;
}
</style>